<template>
<div class="contest-rank" :style="(!contestId)?'margin-left: 10%':''">
    <h2 v-if="!contestId" style="text-align: left;">{{ rankList.contestName }}</h2>
    <div style="text-align: left;margin-bottom: 10px;" v-if="rankList.sealRankTime">排行榜将在 {{rankList.sealRankTime}} 后正式封榜</div>

    <div style="text-align: left;margin-bottom: 10px;">
    <el-select  v-model="search" filterable placeholder="请输入用户名或学校" clearable >
        <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.value">
        </el-option>
    </el-select>
      <el-button icon="el-icon-refresh" style="text-align: left;margin-left: 50px;" type="success"  @click="loading = true;getRankList(ModeContestId)">刷新</el-button>


    </div>
  <div style="width: 70px;" :style="'padding-left: 608px;'">

  </div>


    <el-table v-loading="loading" :data="users.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()) || data.school.toLowerCase().includes(search.toLowerCase()))"
        max-height="96vh" border :style="'width: '+(481+80*problemList.length)+'px;'" class="page-component__scroll">
        <!-- 排名 -->
        <el-table-column prop="ranking" label="名次" width="50" align="center"> </el-table-column>
        <!-- 用户名 -->
        <el-table-column prop="username" label="参赛者" width="150" center>
            <template slot-scope="scope">
                <a href="javascript:void(0)" @click="$router.push('/main/user/detail/'+scope.row.userId)" :title="scope.row.username" :style="'padding-left: 10px;'+ifLoginUser(scope.row.userId)">{{scope.row.username}}</a>
            </template>
        </el-table-column>
        <el-table-column prop="school" label="学校" width="150" sortable>
            <template slot-scope="scope">
                <a href="javascript:void(0)" :title="scope.row.school" :style="'padding-left: 10px;'+ifLoginUser(scope.row.userId)">{{scope.row.school}}</a>
            </template>
        </el-table-column>
        <el-table-column prop="ac" label="通过" width="50"  align="center">
            <template slot-scope="scope">
                <a v-if="scope.row.ac != scope.row.records.length" href="javascript:void(0)" :title="scope.row.ac">{{scope.row.ac}}
                </a>
                <span v-if="scope.row.ac == scope.row.records.length" class="AK" :title="scope.row.ac">*AK</span>

            </template>
        </el-table-column>
        <el-table-column prop="time" label="罚时" width="80" align="center">
            <template slot-scope="scope">
                <a href="javascript:void(0)" :title="scope.row.time+' s'">{{parseInt(scope.row.time/60)}}</a>
            </template>

        </el-table-column>
        <!-- 题目通过情况 -->
        <el-table-column v-for="(item,index1) in problemList" :key="item.problemId" :label="$MyUtils.numToString(index1)" width="80"  align="center">
            <template slot-scope="scope">
                <!-- {{ scope.$index }}+{{ index1 }} -->
                <div :title="rankList.users[scope.$index].records[index1].createTime" v-if="rankList.users[scope.$index].records[index1].id&&rankList.users[scope.$index].records[index1].isAc==0"
                 :class="rankList.users[scope.$index].records[index1].isFirst==0?'first':'ac'"
                style="line-height:85%;">
                  {{rankList.users[scope.$index].records[index1].isFirst+1}} <br/>
<!--                  尝试次数-->
                  <span style="font-size: 80%;" v-if="rankList.users[scope.$index].records[index1].submitSum!=0">
                    ({{rankList.users[scope.$index].records[index1].submitSum}})
                  </span>



                </div>
              <div v-else-if="rankList.users[scope.$index].records[index1].id&&rankList.users[scope.$index].records[index1].isAc==-1" class="wait">
                {{rankList.users[scope.$index].records[index1].submitSum}}
              </div>
                <div v-else-if="rankList.users[scope.$index].records[index1].id" class="warning">
                    -{{rankList.users[scope.$index].records[index1].submitSum}}
                </div>

            </template>
        </el-table-column>
    </el-table>
    <el-backtop target=".page-component__scroll"></el-backtop>
</div>
</template>

<script lang="ts">
import * as contestApi from '@/api/contest'
export default {
    name: 'contestRank',
    props:["contestId","loginUser"],
    data() {
        return {
            loading:false,
            rankList:{},
            problemList:[], //题目列表，取第一个用户题目通过信息
            options:[], //搜索建议，学校/用户名
            search:null, // 搜索内容
            users:[],  //显示内容
            ModeContestId:null,
        };
    },
  updated(){
    this.$nextTick(function () {
      // console.log(this.$el.textContent) // => '修改后的值'
      //重新渲染dom背景色-通过题目
      let dom = window.document.getElementsByClassName("ac");
      for(var i =0;i<dom.length;i++){

        // console.info(dom[i].parentElement.parentElement);
        dom[i].parentElement.parentElement.setAttribute("style","background-color: #60e760;");
      }
      dom = window.document.getElementsByClassName("first");
      for(i =0;i<dom.length;i++){

        // console.info(dom[i].parentElement.parentElement);
        dom[i].parentElement.parentElement.setAttribute("style","background-color: #1daa1d;");
      }
      dom = window.document.getElementsByClassName("warning");
      for(i =0;i<dom.length;i++){

        // console.info(dom[i].parentElement.parentElement);
        dom[i].parentElement.parentElement.setAttribute("style","background-color: #e87272;");
      }


    })
  },
    methods: {
      ifLoginUser(userId){  //榜单中是否为用户
        if(this.loginUser&&this.loginUser.id==userId)return 'color: red;';
        return '';
      },
      setLoading(){ //唉。。。设置为false；
        this.loading = false;
      },
        getRankList(id,isCache){

          contestApi.getRank({"id":id,"isCache":isCache}).then(res=>{

              if(res.data.success){
                  this.rankList = this.DataToString( res.data.data);
                  this.problemList = this.rankList.users[0].records;

                  // this.filter();
                  // console.info(this.problemList)
              }
          })
          setTimeout(this.setLoading,1000);
        },

        DataToString(data){
            this.options = [];
            var tail = 0;
            // 先过滤学校
            for(var i = 0;i<data.users.length;i++){ //遍历用户
                // var name = data.users[i].username;
                // this.options.push({"id":tail++,"value":data.users[i].username});
                if(!this.isHave(data.users[i].school)){
                    this.options.push({"id":tail++,"value":data.users[i].school});
                }
            }
            //过滤名字
            for(i = 0;i<data.users.length;i++){ //遍历用户
                // var name = data.users[i].username;
                this.options.push({"id":tail++,"value":data.users[i].username});

            }
            this.users = JSON.parse(JSON.stringify(data.users));
            return data;
        },
        isHave(value){
            for(var i = 0;i<this.options.length;i++){
                if(this.options[i].value==value)return true;
            }
            return false;
        }



    },
    created(){
        if(this.$route.params.id) {
          this.ModeContestId = this.$route.params.id;
          this.getRankList(this.$route.params.id, this.$route.query.isCache);
        }
        else if(this.contestId) {
          this.ModeContestId = this.contestId;
          this.getRankList(this.contestId);
        }
    },



}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contest-rank{

}
.contest-rank .ac{

    background-color: #60e760;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.contest-rank .wait{

  background-color: #fb7e00;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.contest-rank .first{

    background-color: #1daa1d;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.contest-rank .warning{

    background-color: #e87272;
    width: 100%;
    height: 100%;
    padding: 10px;
}

.contest-rank .AK{
    font-size: 40%;
    font-weight: 100;
    color: #ffffff;
    background-color: #fb7e00;
    padding: 3px;
    border-radius: 2px;
}
</style>
<style>
.contest-rank .cell{
    padding: 0px;
    height: 100%;
    /*min-height: 44px;*/
}
.contest-rank .el-table__cell{
    padding: 0px;
}

.contest-rank .has-gutter th{
    background-color: #e8e8e8;
}
</style>
